<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="myoa/scripts/layui/lay/modules/laydate.js"></script>
    <link  rel="stylesheet"  href="myoa/scripts/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="myoa/scripts/layui/layui.js" charset="utf-8"></script>
    <script src="myoa/scripts/js/jquery-2.1.1.min.js"></script>
    <script src="myoa/scripts/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="myoa/scripts/css/bootstrap.min.css" />
    <script src="myoa/scripts/js/vue.min.js"></script>
    <script src="myoa/scripts/js/vue.js"></script>
    <style>
    	.middle{
    		margin:center;
    		position:relative;
    		border:1px solid #DCDCDC;
    		width: 800px;
    		padding: 20px;
    	}
    	.return{
    		margin:center;
    		position:relative;
    		border:1px solid #DCDCDC;
    		width: 800px;
    		padding: 20px;
    	}
    	.modal-content{
    		height:180px;
    		width: 350px;
    	}
    </style>
</head>
<body>
		 <% session.setAttribute("bbs_userid", 5);%>
		 <% session.setAttribute("bbs_name", "朱七");%>
<div id="main" style="margin-left:30px">
    <h4 style="margin-top:30px">
    	<a href="#"></a>公共信息><a href="myoa/bbs.jsp">內部论坛</a>>论坛详细
    </h4><hr>
    <h2 style="margin-left:40px">${bbs.bbs_title}</h2><hr />
	<div class="middle">
		<input type="hidden" id="replyid" value="${bbs.bbs_id }">
 		<div><a href="../showbbs?bid={{bbs_id}}">${bbs.bbs_name}</a></div>
		<div style="text-align:center;padding: 10px;word-wrap:normal;text-indent:2em;">${bbs.bbs_content}</div>
		<div style="text-align:right;">${bbs.bbs_time}
			<button class="close" data-dismiss="modal" aria-hidden="true" id="hf">我想回复一下</button></div>
	</div>
	
	<div class="return" v-for="re in relist">
		<div><a href="#"></a>{{re.rebbs_name}}</div>
		<div style="text-align:center;padding: 10px;word-wrap:normal;text-indent:2em;">{{re.rebbs_content}}</div>
		<div style="text-align:right;">
			<button id="deleReply" v-on:click="deleteReply($event,re.rebbs_id)">删除</button>
			{{re.rebbs_time}}
			<button class="close" data-dismiss="modal" aria-hidden="true" v-on:click="chuoyix($event)">戳一下</button></div>
	</div>
	<div id="fenye"></div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <tr>
				        <td>回复:<textarea cols="40" rows="6" name="mess_content" id="content"></textarea></td>
					</tr>  
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal" v-on:click="insertReply()">提交</button>
                </div>
            </div>
        </div>
    </div> 
<script>
$(function(){
	
	var vue=new Vue({
		el:"#main",			//作用域
		data:{				//数据名称
			relist:'',		
		},
		methods:{	
			
			showReply:function(curr){
				var rebbs_bid=$("#replyid").val();
				$.ajax({
					url:'queryReply',
					type:'post',
					data:{rebbs_bid:rebbs_bid,curr:curr},
					dataType:'json',
					success:function(result){
						console.log("....."+result.reply.rebbs_id);
						console.log("....."+result.reply.rebbs_name);
						console.log(result);
						vue.relist=result.reply;
						
						layui.use(['laypage', 'layer'], function(){		//layPage的固定格式，分页
							var laypage = layui.laypage,
							layer = layui.layer;
							laypage.render({
								elem:'fenye',			//作用域	
								curr:curr,				//当前页
								count:result.total,		//获取总数	
								limit:5,  				//获取每页显示 
								layout: ['count', 'prev', 'page', 'next', 'skip'], 
								jump:function(obj,first){
									console.log(".............");
									if(!first){
										vue.showReply(obj.curr);
									}
								}
							})
						});
					}
				})
			},
			
			deleteReply:function(event,reid){		//删除回复
				var el=event.currentTarget;
				$.ajax({
					url:'deleteReply',
					data:{reid:reid},
					type:'post',
					dataType:'json',
					success:function(result){
						console.log("添加返回值测试"+result);
						if(result!=0){
							alert("已删除");
							location.reload();
							return;
						}else{
							alert("再来吧");
							location.reload();
							return;
						}
					}
				})
			},
				
			insertReply:function(){		//添加回复
				console.log("....");
				var rebbs_bid=$("#replyid").val();
				var rebbs_content=$("#content").val();
				console.log("reply测试content"+rebbs_content);
				console.log("reply测试id"+rebbs_bid);
				if(rebbs_content==''){
					alert("内容不能为空诺");
				}else{
					$.ajax({
						url:'addReply',
						type:'post',
						data:{rebbs_bid:rebbs_bid,rebbs_content:rebbs_content},
						dataType:'json',
						success:function(result){
							console.log("添加返回值测试"+result);
							if(result!=0){
								alert("成功");
								location.reload();
								return;
							}else{
								alert("炸了");
								return;
							}
							
						}
					})
				}
			},
			chuoyix:function($event){
				console.log("-.+");
				$("#myModal").modal("show");
			},
			
		}	
	});
	vue.showReply(1);
});
$("#hf").click(function(){		//使用了bootstrap的模态框，触发方法
	$("#myModal").modal("show");
});

</script>
</body>
